<template>
	<div class="recharge">
		<div class="header">
			<img @click="back" src="../../assets/nav_back.png"/>
			<span>账户充值</span>
			<span class="img"></span>
		</div>	
		<div class="inner" @click="quickpay">
			<img class="img" src="../../assets/recharge_pic_kuaijie.png"/>
			<p>快捷支付 <br /><img  style="width:0.933rem ; height: 0.373rem;" src="../../assets/recharge_tag_recommend.png"/> <span>快速安全，24小时支付</span></p>
			<img style="width:0.373rem ; height: 0.373rem;" src="../../assets/arrow_right.png"/>
		</div>
		<div class="inner" @click="alipay">
			<img class="img" src="../../assets/recharge_pic_zhifubao.png"/>
			<p>支付宝转账 <br /><span>手机支付，免手续费</span></p>
			<img   style="width:0.373rem ; height: 0.373rem;" src="../../assets/arrow_right.png"/>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			back(){
			    this.$router.back(-1);
			},
			quickpay(){
				this.$router.push({path:'/quickpay'})
			},
			alipay(){
				this.$router.push({path:'/alipay'})
			},
			
		},
		beforeRouteEnter(to,from,next){
			    document.querySelector('title').innerText='谋略家'
			    next()
		}
		
	}
	
</script>

<style lang="less" scoped>
@import '../../less/config.less';
.recharge{
	
	color:white;
	.header{
		padding:0 @p30;
		display: flex;
		justify-content:space-between;
		align-items: center;
		height:@hwrap;
		color:#fff;
		font-size:.48rem;
		img,.img{
			width: @p30;
			height: @p30;
		}
	}
	.inner{
		padding:0 @p30;
		background: #141723;
		margin-top: @fsize;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 2rem;
		p{
			flex: 1;
			margin-left: @p30;
			font-size: @f32;
			span{
				font-size: @f24;
				color: #4a546b;
			}
		}
		.img{
			width: 1.76rem;
			height: 0.64rem;
			
		}
	}
}

</style>